<template>
  <div>
    <!-- 输入框 -->
    <el-input
      class="comment-input"
      type="textarea"
      :rows="5"
      v-model="comment"
      placeholder="请输入评论内容"
      :style="{ height: '100px' }"
    ></el-input>

    <div class="toolbar">
      <el-button @click="toggleEmojiPanel" type="text">
        <i class="el-icon-smile"></i> 😍
      </el-button>
      <el-upload
        action="#"
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" type="text">
          <i class="el-icon-picture-outline"></i>图片
        </el-button>
      </el-upload>
      <div class="spacer"></div>
      <el-button @click="submitComment" type="primary">发表评论</el-button>
    </div>

    <!-- 表情面板 -->
    <div v-show="showEmojiPanel" class="emoji-panel" @click.self="hideEmojiPanel">
      <span v-for="emoji in emojis" :key="emoji" @click="addEmoji(emoji)" class="emoji">{{ emoji }}</span>
    </div>

    <div v-for="(comment, index) in comments" :key="index" class="comment">
      <span>{{ comment.text }}</span>
      <img v-if="comment.imageUrl" :src="comment.imageUrl" alt="图片">
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const comment = ref('');
    const comments = ref([]);
    const showEmojiPanel = ref(false);
    const emojis = ['😊', '😂', '😍', '😎', '👍', '👎', '😁', '😜', '😇', '😘', '😉', '😋']; // 表情列表

    const submitComment = () => {
      if (comment.value.trim() !== '') {
        comments.value.push({ text: comment.value, imageUrl: '' });
        comment.value = '';
      }
    };

    const handleUploadSuccess = (response, file) => {
      if (response.code === 200) {
        const imageUrl = response.data.imageUrl; // 假设后端返回的图片地址为 imageUrl
        comments.value.push({ text: '', imageUrl });
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('只能上传 JPG/PNG 格式的图片');
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB');
        return false;
      }
      return true;
    };

    const toggleEmojiPanel = () => {
      showEmojiPanel.value = !showEmojiPanel.value;
    };

    const hideEmojiPanel = () => {
      showEmojiPanel.value = false;
    };

    const addEmoji = (emoji) => {
      comment.value += emoji;
    };

    return {
      comment,
      comments,
      showEmojiPanel,
      emojis,
      submitComment,
      handleUploadSuccess,
      beforeUpload,
      toggleEmojiPanel,
      hideEmojiPanel,
      addEmoji,
    };
  },
};
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.spacer {
  flex: 1;
}

.comment-input {
  margin-top: 10px;

}
 .el-textarea__inner {
  height: 150px !important;
}
.emoji-panel {
  position: absolute;
  bottom: 40px;
  left: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}

.emoji {
  cursor: pointer;
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
